<!--
 * @Author: your name
 * @Date: 2021-03-04 11:35:38
 * @LastEditTime: 2021-03-05 14:19:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-cloud-system\src\views\companyindex\organizeView\organizeView.vue
-->
<template>
    <div class="organizeView-main-box-big">
        <!-- <baseNumberSlow :num='num ||0' :length='8'></baseNumberSlow> -->
        <div class="organizeView-header-main-box"> 
        </div>
        <div class="organizeView-content-main-box">
            <div class="organizeView-left-box"></div>
            <div class="organizeView-center-box">
                <div class="dataNums-center">
                    <baseNumberSlow :num='num ||0' :length='6'></baseNumberSlow>
                </div>
                <div class="ecahrts-word-map" id='ecahrts-word-map'>
                    
                </div>
            </div>
            <div class="organizeView-right-box"></div> 
        </div>
    </div>
</template>

<script>
import baseNumberSlow from '@/components/common/baseNumberSlow.vue'
export default {
    components: {
        baseNumberSlow
    },
    props: {

    },
    data() {
        return {
            num:'',
            geoCoordMap: { //这里放你打点的坐标信息，虚拟信息
                '青岛':[119.84348,35.819467,'青岛',12],
                '即墨市人民政府':[120.453685,36.395272,'即墨市人民政府',11],
                '市委政府':[120.19013,36.073168,'市委政府',11],
                '青岛大学':[120.429622,36.377366,'青岛大学',11],
                '青岛北站':[120.380868,36.175683,'青岛北站',11],
                '火车站':[120.409743,36.065352,'火车站',11],
                '崂山':[120.633966,36.197331,'崂山',11],
                '城阳区政府':[120.402787,36.313572,'城阳区政府',11],
                '快船客运中心': [120.322429,36.07961,'快船客运中心',11],
                '青岛国际机场': [120.390628,36.273579,'青岛国际机场',11],
                '胶州站': [120.00486,36.305696,'胶州站',11],
                '青岛站': [120.319626,36.070333,'青岛站',11],
                '莱西站': [120.523721,36.817047,'莱西站',11],
                '平度火车站': [119.892033,36.769939,'平度火车站',11],
                '莱西市政府': [120.52329,36.895417,'莱西市政府',11]
            }
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        let that = this
        setInterval(() => {
            that.num = this.getRandomNumber(1,999999)
        }, 10000)
        this.initEchartMap()
    },
    methods: {
        convertData(data){
            var res = [];
            for (let a in data) {
                res.push({
                name:a,value:data[a]
                });
             }
              return res;
        },
        initEchartMap(){
            let res = require('../../../assets/mapApi/data.json')
            let namemap = res.namemap
            let dataArr = res.dataArr
            this.drawChart(namemap, dataArr)
        },
        drawChart (name, data) {
            let chart = this.echarts.init(document.getElementById('ecahrts-word-map'))
            window.addEventListener('resize', function () {
                chart.resize()
            })
            chart.setOption({
                
                // grid: {
                //     left:'10%',
                //     right:'15%',
                //     bottom:'15%'
                // },
                // 提示框组件
                tooltip: {
                trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
                // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                // 使用函数模板  传入的数据值 -> value: number | Array
                formatter: function (val) {
                    return val.data.name + ': ' + val.data.value
                }
                },
                // 视觉映射组件
                geo: {
                    map: 'world', //青岛的地图要准备好
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    zoom:1.1,
                    left:'33%',
                    roam: false,
                    itemStyle: {    //地图颜色
                        normal: {
                            color: '#001E66',
                            borderColor:'#507CE3',
                        },
                    },
                    nameMap: name,
                    roam: true,
                    center: [65, 30.71], //中心点
                    zoom:1.3, //放大倍数
                    label: {
                        show: false // 是否显示对应地名
                    },
                    regions: [{
                        name: '中国',
                        itemStyle: {
                            areaColor: 'red',
                            color: 'red'
                        },
                        label:{
                            show:true
                        }
                    }],
                    emphasis: {
                        label: {
                            show: true, // 是否显示标签
                            color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                        },
                        itemStyle: {
                            areaColor: '#FF6347' // 地图区域的颜色
                        }
                    },
                },
                series: [
                {
                    type: 'effectScatter', // 类型
                    // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
                    name: '世界地图',
                    coordinateSystem: 'geo',
                    mapType: 'world', // 地图类型
                    // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
                    // roam: true,
                    // center: [0, 30.71], //中心点
                    // zoom:1.3, //放大倍数
                    // 图形上的文本标签
                    label: {
                        show: false // 是否显示对应地名
                    },
                    // 地图区域的多边形 图形样式
                    itemStyle: {    //打点的颜色
                        normal: {
                            color: '#fecb2e',
                            shadowBlur: 10,
                            shadowColor: '#0d5ebd'
                        }
                    },
                    data: this.convertData(this.geoCoordMap)
                }
                ]
            })
            chart.on('click', function (params) {
               console.log(params,'params');
            });
        },
        getRandomNumber (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
    },
};
</script>

<style  lang="less" scoped>
.organizeView-main-box-big{
    width: 100%;
    background: url(../../../assets/img/bg.png);
    background-size: 100% auto;
    .organizeView-header-main-box{
        width: 100%;
        height: 73px;
        background-color: pink;
        opacity: 0.3;
    }
    .organizeView-content-main-box{
        width: 100%;
        display: flex;
        height: 1000px;
        .organizeView-left-box,
        .organizeView-right-box{
            width: 470px;
            background-color: skyblue;
            opacity: 0.3;
        }
        .organizeView-center-box{
            flex: 1;
            .dataNums-center{
                width: 40%;
                margin: 0 auto;
            }
            .ecahrts-word-map{
                width: 100%;
                height: 600px;
            }
        }
    }
}
</style>
